<%@ page language="java" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@ taglib prefix="s" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>首页-导航</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<link rel="icon" href="images/favicon.ico" type="image/vnd.microsoft.icon">
	
	<link href="<%=basePath%>player/skin/blue.monday/jplayer.blue.monday.css" rel="stylesheet" type="text/css" />
	<link href="<%=basePath%>css/dialog/dialog.css" rel="stylesheet">
	<link href="<%=basePath%>css/smoothness/jquery-ui.css" rel="stylesheet">
	<style type="text/css">
		
		.demoHeaders {
			margin-top: 2em;
		}
		#dialog-link {
			padding: .4em 1em .4em 20px;
			text-decoration: none;
			position: relative;
		}
		#dialog-link span.ui-icon {
			margin: 0 5px 0 0;
			position: absolute;
			left: .2em;
			top: 50%;
			margin-top: -8px;
		}
		#icons {
			margin: 0;
			padding: 0;
		}
		#icons li {
			margin: 2px;
			position: relative;
			padding: 4px 0;
			cursor: pointer;
			float: left;
			list-style: none;
		}
		#icons span.ui-icon {
			float: left;
			margin: 0 4px;
		}
	</style>
    
    
    <script src="<%=basePath%>js/jquery-1.8.3.js" type="text/javascript"></script>
    <script src="<%=basePath%>js/dialog.js" type="text/javascript"></script>
	<script src="<%=basePath%>js/jquery-ui.min.js" type="text/javascript"></script>
	<script src="<%=basePath%>player/jquery.jplayer.min.js" type="text/javascript"></script>
	<script src="<%=basePath%>player/add-on/jplayer.playlist.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    	$(function(){
    		$("#accordion").accordion({fillSpace:true,active:${accordionId}});
    		$("#tabs").tabs({selected:${selected}});
    		$("#tabs").tabs({add:removeTab});
    		//$("#leftMenu").attr("height",500);
    		//$("#tabs").bind();
    		
    		$("#accordion").find("div").each(function(i){
    			$(this).find("a").each(function(j){
    			});
    		});
    		
    		var count = ${leftItemSize};
    		for(var i = 0;i < count;i++){
    			$("#button" + i).buttonset();
    		}
    		
    		new jPlayerPlaylist({
					jPlayer: "#jquery_jplayer_1",
					cssSelectorAncestor: "#jp_container_1"
				}, [
				    <c:forEach var="music" items="${musics}" varStatus="musicIndex">
						{
							title:"${music.title}——${music.singer}",
							mp3:"${music.address}"
						}
						<c:if test="${musicIndex.last=='false'}">
							,
						</c:if>
				    </c:forEach>
				], {
					swfPath: "<%=basePath%>player",
					supplied: "mp3",
					wmode: "window"
			});
    	});
    	
    	function addTab(tabId,tabName){
    		if($("#tab-" + tabId).length > 0){
    			$("#tabs").tabs({selected:'#tab-' + tabId});
    			return ;
    		}
    		$('<div id="tab-' + tabId + '"><iframe style="margin-top: 0;margin-left: 0;margin-right: 0" scrolling="no" width=100% frameborder="0" height=100% src="<%=basePath%>home/getUrlById.wkm?itemId=' + tabId + '"></iframe></div>').appendTo('#tabs');
    		$("#tabs").tabs("add",'#tab-' + tabId,tabName);
    		$("#tabs").tabs({selected:'#tab-' + tabId});
    		//location.href="home/getUrlById.wkm?itemId=" + tabId;
    		//$('#tabs').tabs('add', '#' + tabId,tabName);
    		//$('#tabs').tabs('select', '#' + tabId);
    		//requestData(tabId);
    	}
    	
    	function removeTab(event,ui){
    		$(ui.tab).dblclick(function(){
    			//var li = $(ui.tab).parent();
    			//var index = $('tabs li').index(li.get(0));
    			$("#tabs").tabs("remove",ui.index);
    		});
    	}
    </script>
    
  </head>
  
  <body>
  	<table border="0" style="width: 100%;border-top-width: 0;border-left-width: 0;border-right-width: 0">
  		<tr>
  			<td style="width: 25%" align="right" valign="top">
  			<table style="width: 100%"><tr>
  			<td style="width: 100%" align="right" valign="top">
  				<div id="leftMenu" style="height: 500px">
	  				<div id="accordion" style="width: 100%;font-size: 12 ">
	  					<c:forEach var="item" items="${list}" varStatus="index">
	  						<div id="${item.itemId}" align="center">${item.itemName}</div>
	  						<div id="button${index.index}">
	  							<c:forEach var="child" items="${item.children}" varStatus="childindex">
	  								<input type="radio" id="${child.itemId}" name="radio"><label onclick="addTab('${child.itemId}','${child.itemName}');" for="${child.itemId}">${child.itemName}</label>
	  							</c:forEach>
	  						</div>
	  					</c:forEach>
					</div>
				</div>
			</td>
			</tr><tr>
			<td valign="top">
				<div id="jquery_jplayer_1" class="jp-jplayer"></div>

				<div id="jp_container_1" class="jp-audio">
					<div class="jp-type-playlist">
						<div class="jp-gui jp-interface">
							<ul class="jp-controls">
								<li><a href="javascript:;" class="jp-previous" tabindex="1">previous</a></li>
								<li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
								<li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
								<li><a href="javascript:;" class="jp-next" tabindex="1">next</a></li>
								<li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
								<li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
								<li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
								<li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
							</ul>
							<div class="jp-progress">
								<div class="jp-seek-bar">
									<div class="jp-play-bar"></div>
								</div>
							</div>
							<div class="jp-volume-bar">
								<div class="jp-volume-bar-value"></div>
							</div>
							<div class="jp-time-holder">
								<div class="jp-current-time"></div>
								<div class="jp-duration"></div>
							</div>
							<ul class="jp-toggles">
								<li><a href="javascript:;" class="jp-shuffle" tabindex="1" title="shuffle">shuffle</a></li>
								<li><a href="javascript:;" class="jp-shuffle-off" tabindex="1" title="shuffle off">shuffle off</a></li>
								<li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
								<li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
							</ul>
						</div>
						<div class="jp-playlist">
							<ul>
								<li></li>
							</ul>
						</div>
						<div class="jp-no-solution">
							<span>Update Required</span>
							To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
						</div>
					</div>
				</div>
  			</td>
  			</tr></table>
  			</td>
  			<td style="width: 75%" align="left" valign="top">
  				<div id="tabs" style="width: 100%;font-size: 12">
					<ul>
						<li><a href="#tabs-1">首页</a></li>
						<c:forEach var="itemName" items="${itemNames}" varStatus="urlIndex">
								<li><a href="#tabs-${urlIndex.index + 2}">${itemName}</a></li>
						</c:forEach>
					</ul>
					<div id="tabs-1" style="height: ${homePage.urlPageHeight }px"><iframe style="margin-top: 0;margin-left: 0;margin-right: 0" scrolling="no" width=100% frameborder="0" height=100% src="${homePage.urlAdd }"></iframe></div>
					<c:forEach var="itemName" items="${itemNames}" varStatus="urlIndex">
						<div id="tabs-${urlIndex.index + 2}" style="height: 2030px">
							<c:forEach var="urls" items="${listUrls}" varStatus="urlIndex">
								<a href="${urls.target}" target="_blank">${urls.itemName}</a>&nbsp;&nbsp;&nbsp;&nbsp;
							</c:forEach>
						</div>
					</c:forEach>
				</div>
  			</td>
  		</tr>
  	</table>
  </body>
</html>
